<template>
  <div id="header" v-show="headmsg.head">
    <span class="mui-icon mui-icon-arrowleft" @click="rollback"></span>
    <span v-text="headmsg.title"></span>
    <span v-show="headmsg.right" v-text="headmsg.rightTxt"></span>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: ["headmsg"],
  methods: {
    rollback() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang='scss' scoped>
#header {
  height: 0.42rem;
  width: 100%;
  background: linear-gradient(to right, #24e9f0, #2564ef);
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0px;
  left: 0px;

  & > span {
    color: #effdfe;
    height: 100%;
    line-height: 0.42rem;
    text-align: center;
  }
  & > span:nth-of-type(1) {
    width: 15%;
    font-size: 0.22rem;
  }
  & > span:nth-of-type(2) {
    width: 60%;
    margin-left: 5%;
    font-size: 0.17rem;
  }
  & > span:nth-of-type(3) {
    width: 20%;
    font-size: 0.15rem;
  }
}
</style>